<template>
    <div class="main-container flex" v-loading="loading">
        <div class="main-body flex-1 mr-[15px]" >
            <el-card class="box-card !border-none" shadow="never">
                <template #header>
                    <div class="card-header">
                        <span class="text-[15px]">{{t('todayData')}}</span>
                    </div>
                </template>
                <el-row>
                    <el-col :span="6">
                        <el-statistic :value="statInfo.today_data.total_member_count">
                            <template #title>
                                <div class="text-[14px] mb-[9px]">{{t('memberNumb')}}</div>
                            </template> 
                        </el-statistic>
						<div class="statistic-footer">
						    <div class="footer-item text-[14px] text-[#333333]">
						        <span>{{t('accumulative')}}</span>
						        <span class="green ml-1">
						            {{ statInfo.total_data.total_member_count }}
						        </span>
						    </div>
						</div>
                    </el-col>
                    <el-col :span="6">
                        <el-statistic :value="statInfo.today_data.total_order_money" :precision="2">
                            <template #title>
                                <div class="text-[14px] mb-[9px]">{{t('orderMoney')}}</div>
                            </template>
                        </el-statistic>
						<div class="statistic-footer">
						    <div class="footer-item text-[14px] text-[#333333]">
						        <span>{{t('accumulative')}}</span>
						        <span class="green ml-1">
						            {{ statInfo.total_data.total_order_money }}
						        </span>
						    </div>
						</div>
                    </el-col>
                    <el-col :span="6">
                        <el-statistic :value="statInfo.today_data.total_visit_count">
                            <template #title>
                                <div class="text-[14px] mb-[9px]">{{t('numberOfVisitors')}}</div>
                            </template>
                        </el-statistic>
						<div class="statistic-footer">
						    <div class="footer-item text-[14px] text-[#333333]">
						        <span>{{t('accumulative')}}</span>
						        <span class="green ml-1">
						            {{ statInfo.total_data.total_visit_count }}
						        </span>
						    </div>
						</div>
                    </el-col>
					<el-col :span="6">
					    <el-statistic :value="statInfo.today_data.total_order_count">
					        <template #title>
					            <div class="text-[14px] mb-[9px]">{{t('orderNumber')}}</div>
					        </template>
					    </el-statistic>
						<div class="statistic-footer">
						    <div class="footer-item text-[14px] text-[#333333]">
						        <span>{{t('accumulative')}}</span>
						        <span class="green ml-1">
						            {{ statInfo.total_data.total_order_count }}
						        </span>
						    </div>
						</div>
					</el-col>
                </el-row>
            </el-card>

            <el-card class="box-card !border-none mt-[15px]" shadow="never">
                <el-row justify="space-between">
                    <el-col :span="4">
                        <div class="w-[120px]  2xl:w-[200px]  py-[15px] rounded-[10px] flex justify-center items-center cursor-pointer border-[1px] border-[#E5E8EE]" @click="toLink('/article/list')">
							<img class="w-[33px]" src="@/assets/images/index/article.png"/>
                            <span class="ml-[10px] text-[16px] text-[#666]">{{t('articleList')}}</span>
                        </div>
                    </el-col>
                    <el-col :span="4">
						<div class="w-[120px]  2xl:w-[200px]  py-[15px] rounded-[10px] flex justify-center items-center cursor-pointer border-[1px] border-[#E5E8EE]" @click="toLink('/member/member')">
							<img class="w-[33px]" src="@/assets/images/index/site_member.png"/>
						    <span class="ml-[10px] text-[16px] text-[#666]">{{t('memberManagement')}}</span>
						</div>
                    </el-col>
                    <el-col :span="4">
						<div class="w-[120px]  2xl:w-[200px]  py-[15px] rounded-[10px] flex justify-center items-center cursor-pointer border-[1px] border-[#E5E8EE]" @click="toLink('/member/balance')">
							<img class="w-[33px]" src="@/assets/images/index/site_balance.png"/>
						    <span class="ml-[10px] text-[16px] text-[#666]">{{t('balanceAccount')}}</span>
						</div>
                    </el-col>
                    <el-col :span="4">
						<div class="w-[120px]  2xl:w-[200px]  py-[15px] rounded-[10px] flex justify-center items-center cursor-pointer border-[1px] border-[#E5E8EE]" @click="toLink('/member/member')">
							<img class="w-[33px]" src="@/assets/images/index/site_auth.png"/>
						    <span class="ml-[10px] text-[16px] text-[#666]">{{t('administrator')}}</span>
						</div>
                    </el-col>
                    <el-col :span="4">
						<div class="w-[120px]  2xl:w-[200px]  py-[15px] rounded-[10px] flex justify-center items-center cursor-pointer border-[1px] border-[#E5E8EE]" @click="toLink('/diy/index')">
							<img class="w-[33px]" src="@/assets/images/index/renovation.png"/>
						    <span class="ml-[10px] text-[16px] text-[#666]">{{t('WebDecoration')}}</span>
						</div>
                    </el-col>
                </el-row>
            </el-card>
            
            <div class="mt-[15px] flex">
                <el-card class="box-card !border-none flex-1 mr-[15px]" shadow="never">
                    <template #header>
                        <div class="card-header">
                            <span class="text-[15px]">{{t('pageView')}}</span>
                        </div>
                    </template>
                    <div ref="visitStat" :style="{ width: '100%', height: '300px' }"></div>
                </el-card>
                <el-card class="box-card !border-none flex-1" shadow="never">
                    <template #header>
                        <div class="card-header">
                            <span class="text-[15px]">{{t('memberDistribution')}}</span>
                        </div>
                    </template>
                    <div ref="memberStat" :style="{ width: '100%', height: '300px' }"></div>
                </el-card>
            </div>
        </div>
        <div class="main-aside w-[300px]">
            <el-card class="box-card !border-none" shadow="never">
                <template #header>
                    <div class="card-header">
                        <span class="text-[15px]">{{t('siteInfo')}}</span>
                    </div>
                </template>
				<div class="site-info w-[260px] h-[150px] pl-[20px] pt-[20px] pb-[10px] pr-[15px]">
					<div class="flex items-end justify-between">
						<div>
							<div class="flex"><icon name="iconfont-iconhuangjinhuiyuan0101-copy" class="leading-[1] mr-[5px]" size="22px" color="#2934DD"></icon><span class="text-[#2934DD] text-[16px] font-bold ">{{ statInfo.site_info.group_name }}</span></div>
							<div><span class="text-[#3C45A5] text-[12px]">{{ t('siteName') }}：{{ statInfo.site_info.site_name }}</span></div>
						</div>
						<span @click="renew" class="cursor-pointer w-[70px] h-[30px] text-center leading-[30px] bg-[#2C3EEF] text-[#fff] text-[14px] rounded-[5px]">续费</span>
					</div>
					<i class="block w-[30px] h-[4px] bg-[#2934DD] mt-[6px] mb-[18px]"></i>
					<div>
						<div><span class="text-[#3C45A5] text-[12px]">{{ t('statusName') }}：{{ statInfo.site_info.status_name }}</span></div>
						<div><span class="text-[#3C45A5] text-[12px]">{{ t('expireTime') }}：{{ statInfo.site_info.expire_time ? statInfo.site_info.expire_time : t('permanent')}}</span></div>
					</div>
				</div>
            </el-card>
            
            <el-card class="box-card !border-none mt-[15px]" shadow="never">
                <template #header>
                    <div class="card-header">
                        <span class="text-[15px]">{{t('serviceSupport')}}</span>
                    </div>
                </template>
				<div>
					<div class="flex items-center pt-[10px] pb-[25px]" v-if="serviceData.wechat_code">
						<img class="w-[120px] h-[120px] mr-[8px]" :src="img(serviceData.wechat_code)" alt="">
						<div>
							<p class="text-[14px]">{{ t('wechatCode') }}</p>
							<p class="text-[14px] text-gray-400">{{ t('wechatCodeDesc') }}</p>
						</div>
					</div>
					<div v-else class="flex items-center pt-[10px] pb-[25px]">
						<img class="w-[120px] h-[120px] mr-[8px]" src="@/assets/images/index/wx_qrcode.jpg" alt="">
						<div>
							<p class="text-[14px]">{{ t('officialAccount') }}</p>
							<p class="text-[14px] text-gray-400">{{ t('wechatCodeDesc') }}</p>
						</div>
					</div>
					
					<div class="flex items-center pt-[25px] pb-[30px] border-gray-300 border-b-[1px]" v-if="serviceData.enterprise_wechat">
						<img class="w-[120px] h-[120px] mr-[8px]" :src="img(serviceData.enterprise_wechat)" alt="">
						<div>
							<p class="text-[14px]">{{ t('enterpriseWechatCode') }}</p>
							<p class="text-[14px] text-gray-400">{{ t('enterpriseWechatCodeDesc') }}</p>
						</div>
					</div>
					<div v-else class="flex items-center pt-[25px] pb-[30px] border-gray-300 border-b-[1px]">
						<img class="w-[120px] h-[120px] mr-[8px]" src="@/assets/images/index/wework_qrcode.png" alt="">
						<div>
							<p class="text-[14px]">{{ t('WeCom') }}</p>
							<p class="text-[14px] text-gray-400">{{ t('enterpriseWechatCodeDesc') }}</p>
						</div>
					</div>
					
					<div class="flex items-center mt-3" v-if="serviceData.tel">
						<div class="mr-[30px] flex">
							<icon name="iconfont-icondianhua" class="leading-[1]" size="20px" color="#000"></icon>
							<p class="text-[14px] ml-2">{{ t('tel') }}</p>
						</div>
						<div>
							<p class="text-[14px]">{{ serviceData.tel }}</p>
						</div>
					</div>
					<div v-else class="flex items-center mt-3">
						<div class="mr-[30px] flex">
							<icon name="iconfont-icondianhua" class="leading-[1]" size="20px" color="#000"></icon>
							<p class="text-[14px] ml-2">{{ t('tel') }}</p>
						</div>
						<div>
							<p class="text-[14px]">400-886-7993</p>
						</div>
					</div>
				</div>
            </el-card>
        </div>
		<el-dialog v-model="renewDialog" :title="t('message')" width="500px" :destroy-on-close="true">
			<div class="flex mt-1">
				<div class="mr-[30px] flex">
					<icon name="iconfont-icondianhua" class="leading-[1]" size="20px" color="#000"></icon>
					<p class="text-[14px] ml-2">{{ t('tel') }}</p>
				</div>
				<div>
				    <p class="text-[14px]">{{ serviceData.tel }}</p>
				</div>
			</div>
		    <template #footer>
		        <span class="dialog-footer">
		            <el-button type="primary" @click="renewDialog = false">{{t('confirm')}}</el-button>
		        </span>
		    </template>
		</el-dialog>
    </div>
</template>

<script lang="ts" setup>
import { reactive, ref,onMounted } from 'vue'
import { t } from '@/lang'
import { getSiteStatInfo } from '@/api/stat'
import { getService } from '@/api/sys'
import { ElMessage, FormRules, ElMessageBox } from 'element-plus'
import * as echarts from 'echarts'
import { img } from '@/utils/common'
import { useRouter } from 'vue-router'

const renewDialog = ref(false)
const renew = () => {
  renewDialog.value = true
}

const loading = ref(true)
const visitStat = ref<any>(null)
const memberStat = ref<any>(null)

const serviceData = reactive<Record<string, string>>({
	wechat_code: '',
	enterprise_wechat: '',
	tel: ''
})

let statInfo = ref({'today_data':{},system:{},version:{},about:[],visit_stat:{},member_stat:{},site_info:{},total_data:{}})
const getStatInfoFn = async (id: number = 0) => {
    statInfo.value = await (await getSiteStatInfo()).data
	
	const data = await (await getService()).data

	serviceData['wechat_code'] = data.wechat_code;
	serviceData['enterprise_wechat'] = data.enterprise_wechat;
	serviceData['tel'] = data.tel;
	
    loading.value = false;
    setTimeout(() => {
        drawChart()
    }, 20)
}
getStatInfoFn()

// 绘制折线图
const drawChart = () => {
    //访问消息
    const visitStatChart = echarts.init(visitStat.value);
    const visitStatOption = ref({
        legend: {},
        xAxis: {
            data: []
        },
        yAxis: {},
        tooltip: {
            trigger: 'axis'
        },
        series: [
            {
            name: t('pageView'),
            type: 'line',
            data: []
            }
        ]
    });
    visitStatOption.value.xAxis.data = statInfo.value.visit_stat.date;
    visitStatOption.value.series[0].data = statInfo.value.visit_stat.value;
    visitStatChart.setOption(visitStatOption.value);

    // 会员分布 
    const memberStatChart = echarts.init(memberStat.value);
    const memberStatOption = ref({
        legend: {},
        tooltip: {},
        series: [
            {
                type: 'pie',
                data: []
            }
        ]
    });

    const len = statInfo.value.member_stat.type.length;
    for(let i = 0; i < len; i++){
        let obj = {};
        obj.name = statInfo.value.member_stat.type[i];
        obj.value = statInfo.value.member_stat.value[i];
        memberStatOption.value.series[0].data.push(obj);
    }
    memberStatChart.setOption(memberStatOption.value);
    window.addEventListener("resize", () => {
    //页面大小变化后Echarts也更改大小
        visitStatChart.resize();
        memberStatChart.resize();
    })
}

const router = useRouter()
/**
 * 链接跳转
 */
const toLink = (link) => {
    router.push(link)
}
</script>

<style lang="scss" scoped>
.card-header > span{
    line-height: 21px;
}
.site-info {
	background-image: url('');
	background-size: 100% 100%;
}
</style>
